<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <script type="text/javascript" src="js/index.js"></script>
        <h1>数据统计表</h1>
        <p>龙垠廷</p>
    </body>
</html>
<table>  <thead>
    <tr>
      <th>线别</th>
      <th>现场库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I线</td>
      <td contenteditable="true"></td>
    </tr>
    <tr>
      <td>F线</td>
      <td contenteditable="true"></td>
    </tr>
    <tr>
      <td>X线</td>
      <td contenteditable="true"></td>
    </tr>
    <tr>
      <td>Y线</td>
      <td contenteditable="true"></td>
    </tr>
  </tbody>
</table>

<div id="chart"></div>

<button onclick="saveData()">保存数据</button>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script>
  // 获取表格中的数据
  const tableData = Array.from(document.querySelectorAll('td[contenteditable="true"]'))
    .map(td => parseFloat(td.innerText || 0));

  // 渲染柱状图
  Highcharts.chart('chart', {
    chart: {
      type: 'column'
    },
    title: {
      text: '现场库存'
    },
    xAxis: {
      categories: ['I线', 'F线', 'X线', 'Y线']
    },
    yAxis: {
      title: {
        text: '数量'
      }
    },
    series: [{
      name: '库存',
      data: tableData
    }]
  });

  // 保存数据
  function saveData() {
    const data = tableData.join('\n');
    const blob = new Blob([data], { type: 'text/plain;charset=utf-8' });
    saveAs(blob, 'data.txt');
  }
</script>